<template>
  <div class="track_the_playback">
    <div class="container" style="padding: 0px">
      <!-- 地图 -->
      <div id="map"></div>
      <!-- 主信息板 -->
      <div class="main-list-wrap">
        <!-- <el-tabs type="border-card" v-model="tabIndex"> -->
        <!-- <el-tab-pane label="网格管理" name='1'> -->
        <el-table :data="arrayGrid" style="width: 100%" height="100%">
          <el-table-column label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column
            prop="GNAME"
            label="网格区域名称"
            width="250"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="PARENT_NAME"
            label="所属班组"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="RoadNum"
            label="道路数"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column width="300" :label="arrayGridLength" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="getGridSubList(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                style="padding-left: 15px"
                @click="getRoadInfo(scope.$index, scope.row)"
                >展示区域路段</el-button
              >
              <el-button
                type="text"
                style="padding-left: 15px; color: red"
                @click="deleteGridTable(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 线段、标段 的 编辑展示数组 -->
      <div class="edit-poly-list-wrap" v-if="isShowTableForPoly">
        <div class="edit-poly-list">
          <div>
            <el-form ref="formGrid" :model="formGrid">
              <el-form-item label="网格名称：">
                <el-input
                  v-model="formGrid.GNAME"
                  class="handle-input mr10"
                ></el-input>
              </el-form-item>
              <el-form-item label="所属班组：">
                <el-select v-model="formGrid.PARENT_NO" placeholder>
                  <el-option
                    v-for="item in arrayTeam"
                    :key="item.CLIENT_NAME"
                    :label="item.CLIENT_NAME"
                    :value="item.CLIENT_NO"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-table
              :data="arrayPolyDataForEdit"
              class="card-table"
              style="width: 100%"
              height="293"
              size="mini"
              :header-cell-style="{ height: '40px' }"
              border
              fit
              highlight-current-row
            >
              <el-table-column type="index" width="50"> </el-table-column>
              <el-table-column
                prop="lng"
                label="经度"
                align="center"
                :formatter="formatterLng"
              ></el-table-column>
              <el-table-column
                prop="lat"
                label="纬度"
                align="center"
                :formatter="formatterLat"
              ></el-table-column>
            </el-table>
          </div>
          <div
            style="
            position: absolute,
            text-align: center;
            margin-top: 15px;
          "
          >
            <el-button
              style="width: 100%; margin-bottom: 10px"
              size="small"
              type="primary"
              @click="saveGird()"
              >保 存</el-button
            >
            <el-button
              style="width: 100%; margin-left: 0px; margin-bottom: 10px"
              size="small"
              type="danger"
              @click="deleteGridWindow()"
              >删 除</el-button
            >
            <el-button
              style="width: 100%; margin-left: 0px"
              size="small"
              @click="tableForPolyCancle"
              >取 消</el-button
            >
          </div>
        </div>

        <!-- 面板切换选项卡 -->
        <!-- <div class="info-tabs">
        <a
          v-for="(item, index) in mapInfoTabs"
          :class="{ active: mapInfoTabValue === index }"
          :key="index"
          @click="changeMapInfoTabValue(index)"
        >
          <i :class="item.icon"></i>
        </a>
      </div> -->
      </div>
      <!-- 线段、标段 的 开启按钮 -->
      <div class="map-operation">
        <el-row>
          <el-col :span="13" :offset="1">
            <ul>
              <!-- <li
                v-for="(item, index) in operationsList"
                :class="{ active: item.active }"
                :key="index"
                @click="changeOperationValue(item, index)"
              >
                {{ item.name }}
              </li> -->
              <li>
                <el-button size="mini" type="text" @click="changeOperationValue"
                  >新建网格</el-button
                >
              </li>
              <li>
                <el-upload
                  action="/上传文件的接口"
                  :on-change="onChange"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept=".xls, .xlsx"
                  class="upload"
                >
                  <el-button size="mini" type="text">导入网格</el-button>
                </el-upload>
              </li>
              <li>
                <el-button size="mini" type="text" @click="setDistance"
                  >测距</el-button
                >
              </li>
            </ul>
          </el-col>
          <el-col :span="10">
            <el-input
              placeholder=""
              v-model="searchGNAME"
              style="margin-top: 8px"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="screenData"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>

      <!-- 数据列表 -->
      <el-dialog
        title="点位数据列表"
        :visible.sync="showGirdSub"
        width="49%"
        class="dialogchild"
      >
        <el-form class="dialogform">
          <el-table
            highlight-current-row
            :data="arrayGridSub"
            style="width: 100%"
            fit
            max-height="450"
          >
            <el-table-column
              prop="NUMBER"
              label="序号"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="LNG"
              label="经度"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="LAT"
              label="纬度"
              align="center"
            ></el-table-column>
          </el-table>
        </el-form>
      </el-dialog>

      <!-- 组织机构 展示区域 -->
      <el-dialog
        @open="dialogOpenMap"
        :before-close="dialogCloseMap"
        title="展示区域"
        :visible.sync="formMap.show"
        width="80%"
      >
        <div style="width: 100%; height: 500px">
          <div
            style="width: 50%; height: 100%; float: left"
            id="mapDialog"
          ></div>
          <div style="width: 49%; height: 100%; float: left; margin-left: 1%">
            <el-table :data="formMap.data" height="100%">
              <el-table-column
                prop="ROADNAME"
                label="道路名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="GNAME"
                label="区域名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="RGrade"
                label="道路等级"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogCloseMap">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { newMap } from '@/common/js/map.js'
export default {
  data () {
    return {
      formMap: {
        polygonPoints: [],

        polygon: null,
        show: false,
        data: [],

      },
      mapDialog: null,
      map: null,
      mapCursor: null,
      mapZoom: 15,
      isZoomChange: 'S',
      tabIndex: '1',
      operationsList: [{
        name: '新建网格',
        icon: 'el-icon-truck',
        active: false
        // }, {
        //   name: '新建路段',
        //   icon: 'el-icon-truck',
        //   active: false
      }, {
        name: '导入网格',
        icon: 'el-icon-truck',
        active: false
        // }, {
        //   name: '新建路段',
        //   icon: 'el-icon-truck',
        //   active: false
      }, {
        name: '测距',
        icon: 'el-icon-knife-fork',
        active: false
      }],
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {}
      },
      formGrid: {
        GID: ''
      },
      searchGNAME: '',
      polygonAll: {
        GNAME: "",
      },
      person: {
        name: '',
        client: '',
        clientList: [{ "CLIENT_NAME": "丰年班组", "CLIENT_NO": "1" }, { "CLIENT_NAME": "高新区班组", "CLIENT_NO": "2" }, { "CLIENT_NAME": "华明园内一班组", "CLIENT_NO": "3" }, { "CLIENT_NAME": "华明园内二班组", "CLIENT_NO": "4" }],
        team: '',
        teamList: [{ "CLIENT_NAME": "一标", "CLIENT_NO": "1" }, { "CLIENT_NAME": "二标", "CLIENT_NO": "2" }, { "CLIENT_NAME": "三标", "CLIENT_NO": "3" }, { "CLIENT_NAME": "四标", "CLIENT_NO": "4" }],
        item: '',
        itemList: [{ "CLIENT_NAME": "东丽东片区", "CLIENT_NO": "000000901" }, { "CLIENT_NAME": "博德尔公司", "CLIENT_NO": "00000090102" }]
      },
      arrayTeam: [],
      mapDrawingPolygon: null,
      mapDrawingPolyLine: null,
      arrayPolyDataForEdit: [],
      arrayPolyline: [],
      arrayPolygon: [],
      arrayGrid: [],
      arrayGridLength: '',
      arrayGridOriginal: [],
      arrayGridSub: [],
      mapClickForPolyLine: null,
      isShowTableForPoly: false,
      showGirdSub: false,
      overlay: null,
      overlayNew: null,

    }
  },
  mounted () {
    // 显示地图
    this.mapShow()
    this.getTeamList()
    this.getGridList()

  },
  methods: {
    formatterLng (row) {
      return row.lng.toFixed(6)
    },
    formatterLat (row) {
      return row.lat.toFixed(6)
    },
    async getTeamList () {
      const { data } = await this.$Http.get('DataListCompany/GetTeamListApi?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.arrayTeam = data
      // this.attendanceMonth.records.teamList = data
    },
    async getGridList () {
      const { data } = await this.$Http.get('Worker/getGridPB?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.arrayGridLength = '网格总计：' + data.length + '个'
      console.log(this.arrayGridLength)
      this.arrayGridOriginal = data
      this.getGridSubAllList()
      this.screenData()
    },
    // 筛选数据
    screenData () {
      this.arrayGrid = this.arrayGridOriginal;
      if (this.searchGNAME) this.arrayGrid = this.arrayGrid.filter(item => item.GNAME.includes(this.searchGNAME))
    },
    async deleteGrid (gid) {
      var url = 'Worker/deleteGridPB?GID=' + gid
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('删除成功')
        this.getGridList()
        this.polyCancle()
      } else {
        this.$message.error('删除失败');
      }
      var arrOverlay = this.map.getOverlays()
      for (let index = 0; index < arrOverlay.length; index++) {
        const element = arrOverlay[index];
        if (gid === element.gid) {
          this.map.removeOverlay(element)
        }
      }
    },
    deleteGridWindow () {
      this.deleteGrid(this.formGrid.GID)
    },
    deleteGridTable (index, row) {
      this.deleteGrid(row.GID)
    },

    getGridSubList (index, row) {
      // 结束画图
      if (this.mapDrawingPolygon) {
        this.mapDrawingPolygon.close()
      }
      this.formGrid = row
      this.map.getOverlays().forEach(element => {
        if (element.gid === row.GID) {
          console.log(element)
          this.arrayPolyDataForEdit = element.getPath()
          console.log('editPolygon11')
          console.log(this.arrayPolyDataForEdit)
          // console.log('列表点击')
          this.editPolygon(element)
          this.map.setViewport(element.getPath());
        }
      });
      // 显示经纬度表
      this.isShowTableForPoly = true
    },
    async getGridSubAllList () {
      this.map.clearOverlays()
      // this.showGirdSub = true
      const { data } = await this.$Http.get('Worker/getGridSubALLPB')
      var gid = data[0].GID
      var points = []
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.GID === gid) {
          points.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawOverlay(gid, points)

          gid = element.GID
          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
          // districtName = element.行政区划
        }
      }
      this.drawOverlay(gid, points)

    },
    drawOverlay (gid, points) {
      var polygon = new BMap.Polygon(points, {
        strokeColor: '#800080',
        strokeWeight: 3,
        strokeStyle: 'dashed',
        fillColor: 'rgba(145,44,238, 0.65)'
      })
      const _this = this
      polygon.addEventListener('click', function (e) {
        // this.ID = null;
        console.log('editPolygon22')
        // console.log('地图点击')
        _this.editPolygon(this)
        _this.arrayPolygon = this.getPath()
        _this.arrayPolyDataForEdit = this.getPath()
        console.log(_this.arrayPolyDataForEdit)
        var arr = _this.arrayGrid.filter(item => item.GID === this.gid)
        if (arr.length > 0) {
          _this.formGrid = arr[0];
          _this.isShowTableForPoly = true;
        }
      })
      polygon.gid = gid
      this.map.addOverlay(polygon)
      // this.polygonAll[gid.toString()] = polygon
      // console.log(this.polygonAll)
      // this.arrayGrid[gid - 1].polygon = polygon
      // this.arrayGrid[gid - 1].points = points

    },
    async saveGird () {
      var url = 'Worker/saveGridPB?GID=' + this.formGrid.GID + '&GNAME=' + this.formGrid.GNAME + '&PARENT_NO=' + this.formGrid.PARENT_NO
      // console.log(url)
      const { data } = await this.$Http.get(url)
      if (data.length > 0) {
        if (data[0].IsSucess > 0) {
          if (this.formGrid.GID < 0) {
            this.$message.success('网格添加成功')
            this.formGrid.GID = data[0].IsSucess;
            this.saveSubGird('添加')
          } else {
            this.$message.success('网格编辑成功')
            this.saveSubGird('编辑')
          }
        } else {
          if (data[0].IsSucess == '-1') {
            this.$message.error('网格添加失败，网格名称不可重复');
          } else {
            this.$message.error('网格添加失败');
          }
        }

      }

    },
    async saveSubGird (str) {
      // console.log(this.arrayPolyDataForEdit)
      this.arrayPolyDataForEdit[0].GID = this.formGrid.GID
      this.$axios({
        url: 'Worker/saveGridSubPB',
        method: 'post',
        data: this.arrayPolyDataForEdit
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('网格经纬度' + str + '成功')
          this.isShowTableForPoly = false
          this.polyCancle();
          this.getGridList();
        } else {
          this.$message.error('网格经纬度' + str + '失败' + '，' + res.data.Message);
        }
      })

    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      // this.map = newMap()
      this.map = new BMap.Map('map')// 创建Map实例
      this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
      this.map.centerAndZoom(new BMap.Point(117.227853, 39.163488), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别
    },
    // 改变右上方显示隐藏图标
    changeOperationValue (item, index) {
      // console.log('aaa')
      // switch (index) {
      //   case 0:
      this.formGrid.GID = -1;
      this.setDrawingPolygonManager()
      //     break
      //   case 1:
      //     this.onChange()
      //     break
      //   case 2:
      //     this.setDistance()
      //     break
      // }
    },
    // 测距
    setDistance () {
      if (!this.mapCursor) {
        this.mapCursor = new BMapLib.DistanceTool(this.map)
      }
      if (this.mapCursor.isOpen) {
        // 结束测量
        this.mapCursor.close()
      } else {
        // 开始测量
        this.mapCursor.open()
      }
    },

    // 划分片区
    setDrawingPolygonManager () {
      if (this.mapDrawingPolyLine) {
        // 结束画图
        this.closePolyLineManager()
      }
      // 显示经纬度表
      this.isShowTableForPoly = true
      // 电子围栏 初始化
      if (!this.mapDrawingPolygon) {
        // 实例化绘图工具
        this.mapDrawingPolygon = new BMapLib.DrawingManager(this.map, {
          // enableDrawingTool: true,//工具栏
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMap.Size(5, 5)
          }
        })

        // 设置绘制模式为绘制多边形
        this.mapDrawingPolygon.setDrawingMode('polygon')

        const _this = this
        // 监听绘制结果
        this.mapDrawingPolygon.addEventListener('polygoncomplete', function (e, overlay) {
          // this.mapDrawingPolygon.addEventListener('overlaycomplete', res => {
          console.log('aa')
          _this.overlayNew = overlay;
          overlay.getPath()
          overlay.addEventListener('click', function (e) {
            // this.ID = null;
            console.log('editPolygon11')
            // console.log('新建，后选中')
            _this.editPolygon(this)
            _this.arrayPolyDataForEdit = this.getPath()
          })
          _this.arrayPolyDataForEdit = overlay.getPath()
          console.log(this.arrayPolyDataForEdit)
        })
      }
      // if (this.mapDrawingPolygon.isOpen) {
      //   // 结束画图
      //   this.mapDrawingPolygon.close()
      // } else {
      // 开始画图
      this.mapDrawingPolygon.open()
      // }
    },
    // 编辑多边形
    editPolygon (overlay) {
      if (this.overlay) {
        this.overlay.disableEditing()
      }
      this.overlay = overlay
      const _this = this

      overlay.enableEditing() // 设置电子围栏可编辑
      // 覆盖物添加监听事件，监听覆盖物编辑情况
      overlay.addEventListener('lineupdate', function (r) {
        _this.arrayPolyDataForEdit = this.getPath()
        console.log('编辑结束')
        console.log(_this.arrayPolyDataForEdit)
      })

      // var m = new BMap.Icon(closeBtnImg, new BMap.Size(40, 40))
      // var closeBtn = new BMap.Marker(overlay.getBounds().getNorthEast(), { icon: m, offset: new BMap.Size(0, -15) })
      // this.map.addOverlay(closeBtn)

      // closeBtn.addEventListener('click', function (r) {
      //   overlay.disableEditing()
      //   console.log(overlay.getPath())
      //   _this.arrayPolyDataForEdit = overlay.getPath()
      //   // 当多边形完成编辑时触发，计算点位与多边形重合范围
      //   // _this.isPointInPolygon(overlay);
      //   _this.map.removeOverlay(this)
      // })
    },
    tableForPolyCancle () {
      this.polyCancle();
      if (this.overlay) {
        this.overlay.setPath(this.arrayPolygon)
      }
    },
    polyCancle () {
      console.log(this.arrayPolyDataForEdit)
      this.isShowTableForPoly = false
      this.arrayPolyDataForEdit = []
      this.formGrid = {}
      // 结束画图
      if (this.mapDrawingPolygon) {
        this.mapDrawingPolygon.close()
      }
      if (this.overlay) {
        this.overlay.disableEditing()
      }
      if (this.overlayNew) {
        this.overlayNew.enableMassClear()
        this.map.removeOverlay(this.overlayNew)
      }
    },
    // 导入Excel
    onChange (file, fileList) {
      //  console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel (e) {
      let that = this;
      const files = that.fileData;
      console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      console.log(fileReader)
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          //  console.log(ev.target)
          //  console.log(this);
          const workbook = this.XLSX.read(data, {
            type: "binary"// 以字符编码的方式解析
          });

          if (workbook.SheetNames.length > 0) {
            const wsname = workbook.SheetNames[0];
            // workbook.SheetNames.forEach(element => {
            const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
            this.bulkLoad(ws)
            // });

          } else {
            this.$message.error("未读取到表格内容");
          }
        } catch (e) {
          console.log(e)
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    async bulkLoad (ws) {
      var arrTeam = this.arrayTeam.filter(item => item.CLIENT_NAME === ws[0].CLIENT_NAME)
      var url = 'Worker/saveGridPB?GID=-1&GNAME=' + ws[0].GNAME + '&PARENT_NO=' + arrTeam[0].CLIENT_NO
      console.log(url)
      const { data } = await this.$Http.get(url)
      if (data.length > 0) {
        if (data[0].IsSucess > 0) {
          console.log('网格添加成功')
          ws[0].GID = data[0].IsSucess
          // ws[0].GID =235
          this.$axios({
            url: 'Worker/saveGridSubwgs84PB',
            method: 'post',
            data: ws
          }).then(res => {
            console.log(res)
            if (res.data.IsSucess) {
              this.$message.success('网格经纬度添加成功')
              this.isShowTableForPoly = false
              this.polyCancle();
              this.getGridList();
            } else {
              this.$message.error('网格经纬度添加失败' + '，' + res.data.Message);
            }
          })
        } else {
          this.$message.error('网格添加失败，网格名称不可重复');
        }
      }
    },
    async getRoadInfo (index, row) {
      this.map.getOverlays().forEach(element => {
        if (element.gid === row.GID) {
          this.formMap.polygonPoints = element.getPath()
        }
      });
      // console.log(row)
      var url = 'Worker/GetGridRoadInfoPB?GID=' + row.GID
      const { data } = await this.$Http.get(url)
      this.formMap.data = data
      // this.formMap.data = row.GNAME.split('，')
      // this.formMap.data = ['环泰南街1', '津滨出口']
      console.log(this.formMap.data)

      this.formMap.show = true
    },
    async getRoadGPS (name) {
      var url = "Worker/GetRoadAll?ROADNAME=" + name
      const { data } = await this.$Http.get(url)
      console.log(data)
      var rid = data[0].ROUDID
      var points = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.ROUDID === rid) {
          points.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawRoad(rid, name, points)

          rid = element.ROUDID
          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
          // districtName = element.行政区划
        }
        if (index === 0) {
          var opts = {
            position: points[0], // 指定文本标注所在的地理位置
            offset: new BMap.Size(10, -10) // 设置文本偏移量
          };
          // 创建文本标注对象
          var label = new BMap.Label(name, opts);
          this.mapDialog.addOverlay(label);

        }
      }
      this.drawRoad(rid, name, points)

    },
    drawRoad (rid, name, points) {
      var polyline = new BMap.Polyline(points, { strokeColor: "#800080", strokeWeight: 4, strokeOpacity: 0.5 });   //创建折线
      this.mapDialog.addOverlay(polyline);
    },

    //区域展示
    dialogCloseMap () {
      this.mapDialog.clearOverlays()
      this.formMap.show = false
      this.formMap.data = [];
      this.formMap.polygon = null
    },
    dialogOpenMap () {
      setTimeout(() => {
        if (!this.mapDialog) {
          this.mapDialogShow()
        }
        var polygon = new BMap.Polygon(this.formMap.polygonPoints, {
          strokeColor: "#800080", strokeWeight: 2, strokeOpacity: 0.5,
          fillColor: 'rgba(145,44,238, 0.65)'
        });  //创建多边形
        this.mapDialog.addOverlay(polygon);   //增加多边形
        this.mapDialog.setViewport(this.formMap.polygonPoints);
        // 画路
        // this.formMap.data.forEach(element => {
        //   this.getRoadGPS(element.ROADNAME)
        // });
      }, 1000)
    },
    mapDialogShow () {
      this.mapDialog = new BMap.Map('mapDialog')// 创建Map实例
      // 初始化地图,设置中心点坐标和地图级别
      this.mapDialog.centerAndZoom(
        new BMap.Point(
          localStorage.getItem("LNG"),
          localStorage.getItem("LAT")
        ),
        16
      );
      this.mapDialog.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
    },
  }
}
</script>

<style scoped lang="less">
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .container {
    flex: 1;
    #map {
      height: 100% !important;
      // height: 800px;
      width: 100%;
    }
  }
}
.map-operation {
  position: absolute;
  right: 2%;
  top: 15%;
  background: rgba(255, 255, 255, 0.9);
  // border: 1px solid #dcdfe6;
  box-shadow: 1px 1px 5px #666;
  border-radius: 3px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #666;
      font-size: 15px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      i {
        margin-right: 3px;
        // font-size: 14px;
        // &:before {
        //   font-size: inherit;
        //   color: inherit;
        // }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      // &:last-child {
      //   &::before {
      //     display: none;
      //   }
      // }
      // &.active {
      //   color: #007acc;
      // }
    }
  }
}
.edit-poly-list-wrap {
  position: absolute;
  left: 25px;
  top: 12%;
  .edit-poly-list {
    background: rgba(255, 255, 255, 0.9);
    height: 550px;
    width: 400px;
    border-radius: 5px;
    padding: 25px 10px 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.main-list-wrap {
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 300px;
  .main-list {
    background: rgba(255, 255, 255, 0.9);
    height: 500px;
    width: 1200px;
    border-radius: 5px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
</style>
